<template>
  <div class="echarts-index-view">
    <div class="index-view">
      <div class="top-view">
        <p>问题：</p>
        <p class="value gray">1. element ui table 样式颜色问题</p>
        <p class="value gray">2. element ui table 跨页面多选问题</p>
      </div>
      <div class="card-view">
        <div class="card-label">基础用法</div>
        <div class="card-list">
          <div
            class="data-list"
            v-for="(item, idx) in dataList"
            :key="idx"
            @click="getMessage(item)"
          >
            <div class="label">
              <span>{{ item.label }}</span>
              <span class="msg"> {{ item.msg }}</span>
            </div>
            <van-icon class="arrow-icon" name="arrow" />
          </div>
        </div>
      </div>
    </div>
    <!-- <component v-else :is="componentType"></component> -->
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      dataList: [
        {
          label: "tabel样式（color）",
          value: "tableStyle",
          msg: "tabel样式的修改",
        },
        {
          label: "tabel 跨页面多选",
          value: "tableRowKey",
          msg: "table 多个页面进行选择，数据回显",
        },
      ],
    };
  },
  created() {},
  mounted() {},
  methods: {
    getMessage(item) {
      this.$router.push({
        name: item.value,
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.echarts-index-view {
  height: 100%;
  .index-view {
    padding: 12px;
    box-sizing: border-box;
    height: 100%;
    overflow: auto;
    .top-view {
      font-size: 14px;
      background-color: #fff;
      padding: 12px;
      border-radius: 12px;
      .gray {
        color: gray;
      }
      .label {
        margin: 8px;
      }
      .value {
        margin: 8px;
      }
    }
    .card-view {
      .card-label {
        margin: 0;
        padding: 16px;
        color: rgba(69, 90, 100, 0.6);
        font-weight: normal;
        font-size: 14px;
        line-height: 16px;
      }
      .card-list {
        overflow: hidden;
        border-radius: 8px;
        .data-list {
          position: relative;
          display: flex;
          justify-content: space-between;
          box-sizing: border-box;
          width: 100%;
          padding: 10px 16px;
          overflow: hidden;
          color: #323233;
          font-size: 15px;
          line-height: 24px;
          background-color: #fff;
          ::after {
            position: absolute;
            box-sizing: border-box;
            content: " ";
            pointer-events: none;
            right: 16px;
            bottom: 0;
            left: 16px;
            border-bottom: 1px solid #ebedf0;
            -webkit-transform: scaleY(0.5);
            transform: scaleY(0.5);
          }
          &:last-child {
            ::after {
              content: none;
            }
          }
          .arrow-icon {
            height: 24px;
            font-size: 16px;
            line-height: 24px;
            margin-left: 4px;
            color: #969799;
          }
          .msg {
            font-size: 12px;
            color: #666;
            margin-left: 5px;
          }
        }
      }
    }
    .item-vew {
      margin-top: 12px;
      .title {
        font-size: 15px;
      }
      .info {
        font-size: 14px;
        text-indent: 20px;
        color: #666;
        line-height: 20px;
      }
    }
  }
}
</style>